import React from 'react';
import { inject, observer } from 'mobx-react';

@inject('portalThemeStore')
@observer
class E9Switch extends React.Component {
  constructor(props) {
    super(props);
    this.onModeChange = this.onModeChange.bind(this);
  }

  render() {
    const { portalThemeStore } = this.props;
    const { leftMenuMode } = portalThemeStore;

    return (
      <div className="e9header-switch" onClick={this.onModeChange}>
        {leftMenuMode == 'inline' ? <i className="anticon anticon-menu-fold" /> : <i className="anticon anticon-menu-unfold" />}
      </div>
    );
  }

  onModeChange() {
    const { portalThemeStore } = this.props;
    const { leftMenuMode } = portalThemeStore;
    portalThemeStore.onLeftMenuModeChange(leftMenuMode == 'inline' ? 'vertical' : 'inline');
  }
}

export default E9Switch;
